<html>

<head>
    <link rel="stylesheet" href="../normalize.css">
    <link rel="stylesheet" href="../index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <my-component :init-count="1"></my-component>
    </div>
    <script>
        Vue.component('my-component', {
            props: ['init-count'],
            template: '<div>{{count}}</div>',
            data: function () {
                return {
                    count: this.initCount
                }
            }
        })
        new Vue({
            el: '#app',
        })
    </script>

    <div id="app2">
        <mynew-component :width="100"></mynew-component>
    </div>
    <script>
        Vue.component('mynew-component', {
            props: ['width'],
            template: '<div :style="style">组件内容</div>',
            computed: {
                style: function () {
                    return {
                        width: this.width + 'px',
                        background: 'lightgray',
                        textAlign: 'center'
                    }
                }
            }
        })
        new Vue({
            el: '#app2',
        })
    </script>


</body>

</html>